<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div class="box">
      <img src="../../assets/img/suyuanBg.png" alt="" />
      <div class="main">
        <div class="search-box clearfix">
          <img src="../../assets/img/search.png" alt="" class="fl" />
          <input
            type="text"
            placeholder="请输入条形码"
            class="fl"
            v-model="materialId"
          />
          <p @click="search()">搜索</p>
        </div>

        <div
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <div v-if="isShow">
            <img
              :src="baseUrl + '/sys/file/showpic?id=' + imgUrl"
              alt=""
              class="goods-pic"
            />
            <p class="goods-name">{{ otherInfo.materialName }}</p>
            <div class="goods-info clearfix">
              <div class="goods-list">
                <ul>
                  <li><span>检测报告：</span><span>有</span></li>
                  <li>
                    <span>产品名称：</span><span>{{ info.materialName }}</span>
                  </li>
                  <li>
                    <span>生产主体：</span><span>{{ otherInfo.baseName }}</span>
                  </li>
                  <li>
                    <span>生产日期：</span
                    ><span>{{ otherInfo.birthdate }}</span>
                  </li>
                  <li>
                    <span>种子:</span><span>{{ otherInfo.brand }}</span>
                  </li>
                  <li>
                    <span>农药：</span
                    ><span>{{ otherInfo.pesticidesName }}</span>
                  </li>
                  <li>
                    <span>种子厂家：</span
                    ><span>{{ otherInfo.seedManufacturers }}</span>
                  </li>
                  <li>
                    <span>农药厂家：</span
                    ><span>{{ otherInfo.pesticidesManufacturers }}</span>
                  </li>
                  <li>
                    <span>化肥：</span><span>{{ otherInfo.unit }}</span>
                  </li>
                  <li>
                    <span>化肥厂家：</span
                    ><span>{{ otherInfo.fertilizerManufacturers }}</span>
                  </li>
                </ul>
              </div>
              <div class="goods-list">
                <ul>
                  <li><span>商品信息：</span><span>有</span></li>
                  <li>
                    <span>监测方式：</span><span>{{ otherInfo.examWay }}</span>
                  </li>
                  <li>
                    <span>检测结果：</span
                    ><span>{{ otherInfo.examResult }}</span>
                  </li>
                  <li>
                    <span>检测时间：</span><span>{{ otherInfo.examTime }}</span>
                  </li>
                  <li>
                    <span>认证方式：</span
                    ><span>{{ otherInfo.authenticationWay }}</span>
                  </li>
                  <li>
                    <span>检测人员：</span
                    ><span>{{ otherInfo.inspector }}</span>
                  </li>
                  <li>
                    <span>检测单位：</span
                    ><span>{{ otherInfo.checkUnit }}</span>
                  </li>

                  <li>
                    <span>检测报告：</span>
                  </li>
                  <el-row>
                    <div v-if="checkRepotyList.length > 0" >
                      <div
                        v-for="(sunItem, sunIndex) in checkRepotyList"
                        :key="sunIndex"
                      >
                        <img
                          class="checkRepoty-pic"
                          :src="baseUrl + '/sys/file/showpic?id=' + sunItem.id"
                          @click="donwLoadReport(sunItem.id)"
                          alt=""
                        />
                      </div>
                    </div>
                    <div v-else>暂无上传检测报告</div>
                  </el-row>

                </ul>
              </div>
              <div class="goods-list">
                <ul style="margin-bottom: 20px">
                  <li>
                    <span>流通信息：</span><span>{{ baseName }}</span>
                  </li>
                </ul>
                <div class="flow">
                  <div
                    class="flow-list clearfix"
                    v-for="(item, index) in list"
                    :key="index"
                  >
                    <span class="pint"></span>
                    <p class="line" v-if="index + 1 < list.length"></p>
                    <p class="name">{{ item.userId }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="no-data">
            <img src="../../assets/img/noData.png" />
            <p>暂无数据</p>
          </div>
        </div>
      </div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";
import Cookie from "js-cookie";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage,
  },
  data() {
    return {
      materialId: "",
      list: [],
      baseName: "",
      info: {},
      otherInfo: {},
      imgUrl: "",
      checkRepotyList: [],
      loading: false,
      isShow: false,
    };
  },
  methods: {
    donwLoad() {},
    // 搜索
    search() {
      this.getDetail();
      this.getUserList();
      this.getBuyRecordList();
    },
    //获取商品详情
    getDetail() {
      this.loading = true;
      this.$http("get", "/sys/iaMaterialCorps/getOfficialDetail.do", {
        materialId: this.materialId,
      }).then((res) => {
        if (res.code == "0000") {
          this.otherInfo = res.result;

          //图片处理
          if (res.result.iconUrl) {
            this.imgUrl = this.spimgurl(res.result.iconUrl);
          }
          console.log("检验报告：", res.result.checkReport);
          //检测报告
          if (res.result.checkReport != null && res.result.checkReport !== "") {
            var imgUrlList = [];
            var splitList = this.otherInfo.checkReport.split(",");

            for (let index = 0; index < splitList.length; index++) {
              const element = splitList[index];
              var elmentList = element.split(":");
              //图片
              var itemData = {
                id: elmentList[0],
                type: "img",
              };
              imgUrlList.push(itemData);
            }
            this.checkRepotyList = imgUrlList;
          }

          this.loading = false;
          this.isShow = true;
        }
      });
    },
    //处理图片分隔
    spimgurl(value) {
      if (value != null) {
        let ff = value.split(",");
        if (ff != null && ff.length > 0) {
          const element = ff[0];
          var elmentList = element.split(":");
          return elmentList[0];
        }
      }
      return "";
    },
    //流通信息
    getUserList() {
      this.loading = true;
      this.$http("get", "/sys/foodSafeSource/findPurchaserPage.do", {
        materialId: this.materialId,
        pageNum: 1,
        pageSize: 100,
      }).then((res) => {
        if (res.code == "0000") {
          var rows = res.result.rows;
          if (rows.length > 0) {
            this.list = rows;
            this.baseName = rows[0].baseId;
          }
        }
        this.loading = false;
      });
    },
    // 下载报告
    donwLoadReport(id) {
      console.log(id);
      window.location.href =
        this.baseUrl +
        "/sys/file/new/down?TOKEN=" +
        Cookie.get("token") +
        "&id=" +id;
    },

    //农资购买记录
    getBuyRecordList() {
      this.loading = true;
      this.$http(
        "get",
        "/sys/foodSafeSource/findBuyProductsByMerchantPage.do",
        {
          materialId: this.materialId,
          pageNum: 1,
          pageSize: 100,
        }
      ).then((res) => {
        if (res.code == "0000") {
          var rows = res.result.rows;
          if (rows.length > 0) {
            this.info = rows[0];
          }
        }
        this.loading = false;
      });
    },
  },
};
</script>
<style scoped>
.box {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 20px;
  min-height: 400px;
  background: #fff;
}
.search-box {
  margin-top: 32px;
  width: 295px;

  height: 32px;
  border: 1px solid #dcdcdc;
  border-right: 0;
  margin-bottom: 15px;
}
.search-box img {
  width: 20px;
  height: 20px;
  font-size: 14px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 6px;
}
.search-box input {
  width: 206px;
  height: 32px;
  border: 0;
}
.search-box p {
  width: 45px;
  height: 30px;
  background: #f48d06;
  border-radius: 2px 0px 0px 2px;
  border: 1px solid #f48d06;

  font-size: 12px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  float: left;
  cursor: pointer;
}
.search-box p:active {
  border: 0;
  background: #ee781b;
}
.goods-pic {
  width: 271px;
  height: 271px;
}
.checkRepoty-pic {
  width: 100px;
  float:left;
  height: 100px;
  margin: 10px 10px;
}
.goods-list {
  float: left;
  width: 273px;
  min-height: 300px;
  margin-right: 10px;
}
.goods-list:nth-child(3) {
  margin-right: 0;
}
.goods-list ul li {
  line-height: 30px;
}
.goods-list ul li span {
  color: #277430;
  font-size: 12px;
  float: left;
}
.goods-list ul li:nth-child(1) span {
  font-size: 14px;
}
.goods-list ul li::after {
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
}
.goods-list ul li img {
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.goods-list ul li strong {
  font-size: 14px;
  color: #ee781b;
  cursor: pointer;
}
.goods-list ul li span:nth-child(1) {
  width: 70px;
  float: left;
}
.goods-list ul li span:nth-child(2) {
  width: 200px;
  float: left;
}
.goods-name {
  font-size: 16px;
  color: #4a4a4a;
  padding-top: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 20px;
}
.main {
  width: 841px;
  min-height: 400px;
  margin: 0 auto;
}
.flow-list span {
  display: block;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background: #c1c1c1;
  position: absolute;
  left: -3.5px;
  top: 6px;
}
.flow-list {
  position: relative;
  padding-bottom: 40px;
}
.flow-list p.name {
  width: 250px;
  font-size: 12px;
  color: #277430;
  margin-left: 15px;
}
.flow-list .line {
  position: absolute;
  height: 100%;
  width: 1px;
  background: #c1c1c1;
  left: 0;
  top: 10px;
}
.no-data {
  text-align: center;
  margin-top: 60px;
}
.no-data p {
  font-size: 14px;
  color: #666;
  position: relative;
  top: -40px;
}
</style>
